<template>
<div>
  <table align="center">
    <tr>
      <td>分类名称</td>
    </tr>
    <tr v-for="i in from">
      <td>{{i.name}}</td>
    </tr>
  </table>

  <table border="1" align="center">
    <tr>
      <td>书名</td>
      <td>价格</td>
      <td>分类</td>
    </tr>
    <tr v-for="i in book">
      <td>{{i.name}}</td>
      <td>{{i.price}}</td>
      <td>{{i.cate.name}}</td>
    </tr>
    <tr>
      <td v-for="i in tpage">
        <button @click="get_book(i)" :value="i.id">{{i}}</button>
      </td>
    </tr>
  </table>
  <input type="text" v-model="name"><button @click="search">搜素</button>
  {{books}}
</div>
</template>

<script>
export default {
  name: "cate",
  data(){
    return{
      from:{},
      book:[],
      tpage:0,
      name:"",
      books:[]
    }
  },
  methods:{
    get_cate(){
      this.$axios.get('users/cate/')
        .then(res=>{
          if(res.data.code==200){}
          this.from=res.data.list
        })
    },
    get_book(p){
      this.$axios.get('users/book/?p='+p)
      .then(res=>{
        if(res.data.code==200){
          this.book=res.data.list
          this.tpage=res.data.tpage

        }
      })
    },
    search(){
      this.$axios.get('users/books/?name='+this.name)
        .then(res=>{
          if(res.data.code==200){
            this.books=res.data.list

          }
        })
    }
  },

  mounted() {
    this.get_cate()
    this.get_book(1)
    this.search()
  }
}
</script>

<style scoped>

</style>
